<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
            <style>
                .div1{
                    width:300px;
                    height:300px;
                    background-color: rgb(139,0,22);
                    color:#FCDAD5;
                    margin: 15px;
                }
                .div2{
                    width:300px;
                    height:300px;
                    background-color: #F3C246;
                    color:#006241;
                    margin: 15px;
                }
                .div3{
                    width:300px;
                    height:300px;
                    background-color: rgba(0, 255, 255, 0.068);
                    color:rgba(12, 45, 255, 0.2);
                    margin: 15px;
                }
                .hat{
                    width:300px;
                    height:300px;
                    background-color: rgba(134, 243, 10, 0.918);
                    color:rgba(12, 45, 255, 0.2);
                    overflow: scroll;
                    margin: 15px;
                }
                .rasim{
                    width:300px;
                    height:300px;
                    background-color: rgb(147, 236, 207);
                    color:rgba(16, 202, 100, 0.2);
                    overflow:auto;
                    margin: 15px;
                    opacity:0.1;
                    filter:alpha(opacity=40);
                }
                .div4{
                    width:300px;
                    height:300px;
                    background-color: rgba(64, 221, 169, 0.192);
                    border: 10px red solid;
                    border-top: 2px #fcec08 solid;
                    border-left:10px rgb(8, 252, 69) dashed;
                    border-bottom:10px rgb(8, 186, 240) double;
                    border-right:2px rgb(35, 13, 235) dotted;
                    margin-top:30px;
                    margin-bottom:50px;
                    margin-right:60px;
                    margin-left:100px;
                    padding-top:100px;
                    padding-left:80px;
                    padding-right:50px;
                    padding-bottom:30px;
                    border-radius: 30px;
                }
            </style>
    </head>
    <body>
        <div class="div1">kurbanjan</div>
        <div class="div2">kurbanjan</div>
        <div class="div3">kurbanjan</div>
        <div class="hat">沙丁鱼（Sardine）是硬骨鱼纲鲱形目鲱科沙丁鱼属、小沙丁鱼属和拟沙丁鱼属及鲱科某些食用鱼类的统称。
            也指制成油浸鱼罐头的普通鲱（Clupea harengus）以及其它小型的鲱或鲱状鱼。沙丁鱼在香港被人们称沙甸鱼，又称萨丁鱼、鳁和鰯。
            小者长二寸，大者尺许，下颚较上颚略长，齿不显，背苍腹白，肉美，多用来制为罐头食品。最初在意大利萨丁尼亚捕获而得名，古希腊
            文称其“sardonios”意即“来自萨丁尼亚岛”。分布于南北纬度6～20度的等温带海洋区域中。沙丁鱼主要用作食用，但鱼肉亦可制为动物饲料。
            沙丁鱼油的用途包括制造油漆、颜料和油毡，在欧洲还用来制造人造奶油。同时是世界重要的海洋经济鱼类。沙丁鱼为群居鱼类，聚集时，沙丁鱼的数量可达3亿只。</div>
        <div class="rasim"><img src="https://img1.baidu.com/it/u=188224918,486149607&fm=26&fmt=auto&gp=0.jpg" filter:alpha(Opacity=50);></div>
        <div class="div4">kurbanjan</div>
    </body>
</html>